import { View } from "@tarojs/components";
import { useRouter } from "@tarojs/taro";
import { useReactive } from "ahooks";

import ByTabs from "@/components/ui/ByTabs";
import Page from "@/components/common/Page";
import WagesCard from "./components/WagesCard";

import useList from "@/hooks/useList";

const tabItems = [
  { label: "待结款", value: 1 },
  { label: "已结款", value: 2 },
];

export default () => {
  const { params } = useRouter();

  const intentCustomerId = Number(params.intentCustomerId);

  const search = useReactive({
    status: 1,
    intentCustomerId,
    typeCode: "FI_PayrollApply",
  });

  const {} = useList("", {
    defaultParams: [search],
  });

  return (
    <Page
      slotHeader={
        <View className="px-3 pb-3 bg-white">
          <ByTabs capsule tabs={tabItems} active={search.status} />
        </View>
      }
    >
      <View className="px-4">
        <WagesCard />
        <WagesCard />
        <WagesCard />
      </View>
    </Page>
  );
};
